<template>
  <div class="home">
    <!-- 顶部：财产关联查询 -->
    <div
      style="background: white; border-radius: 8px; box-shadow: 0 0px 0px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 16px;">
      <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <span>财产关联查询：被查询人（{{ search.name }}）</span>
        <!-- 按钮区域 -->
        <div style="display: flex; gap: 10px;">
          <el-button type="primary" @click="$router.back()" size="big">返回</el-button>
          <el-button type="info" @click="goToPage('manage2')" size="big">送达与拘传指引</el-button>
          <el-button type="warning" @click="goToPage('manage3')" size="big">关联人财产查询</el-button>
          <el-button type="danger" @click="goToPage('manage4')" size="big">清场辅助与评估</el-button>
        </div>
      </div>
    </div>


    <div class="panels-container">
      <!-- 左侧：搜索 + AI 指引 + 关联人信息 -->
      <div class="left-panel">
        <!-- 搜索栏 -->
        <div class="search-bar">
          <el-input clearable v-model="search.name" placeholder="请输入姓名" class="search-input" @keyup.enter="load" />
          <el-input clearable v-model="search.phone" placeholder="请输入手机号" class="search-input" @keyup.enter="load" />
          <el-input clearable v-model="search.idNumber" placeholder="请输入身份证号" class="search-input" @keyup.enter="load" />
          <el-button type="primary" @click="load" class="search-btn">查询</el-button>
          <!-- <el-button type="primary" @click="$router.back()" class="search-btn">返回</el-button> -->
        </div>
        <!-- AI 智能行动指引 -->
        <div class="ai-guide-card card">
          <div class="ai-content">
            <img :src="aiIconSrc" alt="AI 图标" class="ai-icon" :style="{ opacity: iconOpacity }" />
            <div class="ai-text-container">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" :model-value="typedText"
                placeholder="AI 智能行动指引" class="ai-textarea" readonly />
              <!-- 覆盖层用于显示标红加粗的履行能力评分 -->
              <!--              <div-->
              <!--                  v-if="performanceScore !== null && showScore"-->
              <!--                  class="score-overlay"-->
              <!--              >-->
              <!--                履行能力打分：{{ performanceScore }}/10-->
              <!--              </div>-->
            </div>
          </div>
        </div>

        <!-- 关联人信息（带分页） -->
        <el-card style="height: 72%" class="info-card bottom-aligned">
          <el-tabs>

            <el-tab-pane label="关联人信息" style="font-weight: bold; font-size: 16px; margin-bottom: 10px;">
              <template #header>
                <div class="card-header">关联人信息</div>
              </template>
              <!-- 表格部分 -->
              <el-table :data="currentPageData" border stripe class="info-table">
                <el-table-column prop="recName" label="关联人姓名" />
                <el-table-column prop="recPhone" label="关联人电话" />
                <el-table-column prop="recAddress" label="关联人地址" />
                <el-table-column label="关系" width="120">
                  <template #default="{ row }">
                    <el-tag type="info">{{ getRelation(row.recName) }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="单位/住址重合" width="150">
                  <template #default="{ row }">
                    <el-tag type="success" v-if="getRelation(row.recName) === '配偶'">是</el-tag>
                    <el-tag type="success" v-else-if="isAddressDuplicate(row)">是</el-tag>
                    <el-tag type="danger" v-else>否</el-tag>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页组件 -->
              <div class="pagination-container" v-if="total > 0">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5]"
                  :small="false" :disabled="total <= 0" :background="true" :total="total"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              </div>
              <div class="no-data" v-else>
                暂无关联人数据
              </div>
            </el-tab-pane>
            <el-tab-pane label="外卖、快递信息">
              <ExpressInfo :data="expressData" />
            </el-tab-pane>
            <el-tab-pane label="个人企业信息">
              <PersonalEnterprise :data="personalEnterpriseData" :pageSize="10" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>

      <!-- 右侧：图表区域 -->
      <div class="right-panel">
        <!-- 关联信息分析卡片 -->
        <el-card class="info-card">
          <template #header>
            <div class="card-header">关联信息分析</div>
          </template>
          <div class="info-content" v-if="performanceScore === null">
            暂无数据
          </div>
          <div class="info-content" v-else>
            <p class="info-text">
              <span style="display: inline-block; width: 50%; text-align: left;">
                <strong>关联人数：</strong>
                <strong>{{ tableData.length }}人</strong>
              </span>
              <span style="display: inline-block; width: 50%; text-align: left;">
                <strong>银行卡数：</strong>
                <strong>{{ tableDataCards.length }}张</strong>
              </span>
              <br>
              <span style="display: inline-block; width: 50%; text-align: left;">
                <strong>地址重合：</strong>
                <strong>{{ hasDuplicateAddr ? '是' : '否' }}</strong>
              </span>
              <span style="display: inline-block; width: 50%; text-align: left;">
                <strong>异常下单：</strong>
                <strong>{{ orderPhone ? '是' : '否' }}</strong>
              </span>
              <br>
              <span style="display: inline-block; width: 100%; text-align: left;">
                <strong>是否持有共同的财产：</strong>
                <strong>{{ coOwnershipInfo }}</strong>
              </span>
            </p>

          </div>
        </el-card>
        <!-- 财产信息交互频次柱状图 -->
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">外卖信息交互频次</div>
          </template>
          <div ref="chartRefBar" class="chart-container bar-chart"></div>
        </el-card>

        <!-- 时间段内财产交互波动图 - 调整高度以对齐 -->
        <el-card class="chart-card adjusted-line-chart">
          <template #header>
            <div class="card-header">部分时间段内发生财产交互的波动图</div>
          </template>
          <div ref="chartRefLine" class="chart-container line-chart"></div>
        </el-card>
        <!-- 银行卡号：美化显示 -->
        <div v-if="tableDataCards.length > 0" class="bank-cards-container card bottom-aligned">
          <div class="section-title">关联银行卡号</div>
          <div class="cards-grid">
            <div v-for="(card, index) in tableDataCards" :key="index" class="card-item">
              {{ card }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch, nextTick, computed } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';
import { useRoute } from "vue-router";
import router from "@/router";
import ExpressInfo from './ExpressInfo.vue';
import PersonalEnterprise from './PersonalEnterpriseInfo.vue';
import { getPersonInfo } from "@/scripts/person";

export default {
  name: 'GuanLianRenSearch',
  components: { ExpressInfo, PersonalEnterprise },
  setup() {
    const route = useRoute();
    const search = ref({
      name: '',
      phone: '',
      idNumber: ''
    });

    // 传递当前搜索的姓名、电话等参数
    const goToPage = (pageName) => {
      router.push({
        name: pageName,
        query: {
          idNumber: route.query.idNumber,
          name: search.value.name || route.query.name,
          phone: search.value.phone || route.query.phone,
          from: 'manage3' // 标识来源页面
        }
      });
    };

    const goToHome = () => {
      router.push({ name: 'manage1' });
    };

    watch(
      () => route.query,
      (newQuery) => {
        if (newQuery.name || newQuery.phone) {
          search.value.name = newQuery.name || '';
          search.value.phone = newQuery.phone || '';
          search.value.idNumber = newQuery.idNumber || '';
          nextTick(() => {
            load();
          });
        } else if (newQuery.name === undefined && newQuery.phone === undefined) {
          search.value.name = '';
          search.value.phone = '';
          search.value.idNumber = '';
        }
      },
      { deep: true, immediate: true }
    );

    // 分页相关变量
    const tableData = ref([]);
    const currentPage = ref(1);
    const pageSize = ref(5); // 每页显示5条数据
    const expressData = ref([]);
    // 计算当前页数据
    const currentPageData = computed(() => {
      const startIndex = (currentPage.value - 1) * pageSize.value;
      return tableData.value.slice(startIndex, startIndex + pageSize.value);
    });

    // 计算总条数
    const total = computed(() => tableData.value.length);

    // 分页事件处理
    const handleSizeChange = (val) => {
      pageSize.value = val;
      currentPage.value = 1; // 重置到第一页
    };

    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };

    const tableDataCards = ref([]);
    const typedText = ref('');
    const suggest = ref('');
    const typingTimer = ref(null);
    const typingInterval = ref(100);

    const chartRefBar = ref(null);
    const chartRefLine = ref(null);

    const aiIconSrc = require('../../public/ai.png');
    const iconOpacity = ref(0);

    const performanceScore = ref(null);
    const orderPhone = ref('');
    const hasDuplicateAddr = ref(false);
    const coOwnershipInfo = ref('未知');
    const showScore = ref(false);
    const relatedPeopleFrequency = ref([]);

    const getRelation = (name) => {
      if (name.includes('刘美琳')) return '配偶';
      if (name.includes('张伟')) return '兄弟';
      return '点单';
    };

    const isAddressDuplicate = (row) => {
      const currentAddr = row.recAddress?.trim();
      if (!currentAddr) return false;
      return tableData.value.some(other => {
        return other.recAddress?.trim() === currentAddr && other !== row;
      });
    };

    const safeArray = (data) => {
      if (!data) return [];
      if (Array.isArray(data)) return data;
      if (typeof data === 'object' && data.list) return data.list;
      return [data];
    };

    if (route.query.phone) {
      search.value.phone = route.query.phone;
    }
    if (route.query.name) {
      search.value.name = route.query.name;
    }

    const personalEnterpriseData = ref([]);

    const load = async () => {
      // 如果姓名、手机号、身份证号都为空，则从路由参数中获取
      if (search.value.name?.trim() === '' && search.value.phone?.trim() === '' && search.value.idNumber?.trim() === '') {
        search.value.name = route.query.name || '';
        search.value.phone = route.query.phone || '';
        search.value.idNumber = route.query.idNumber || '';
      }
      // 信息不全
      if (search.value.name?.trim() === '' || search.value.phone?.trim() === '' || search.value.idNumber?.trim() === '') {
        // 查询案件信息，获取完整姓名、身份证号、手机号
        const personInfo = await getPersonInfo(search.value.name, search.value.phone, search.value.idNumber);
        if (personInfo.length > 0) {
          const p = personInfo[0];
          search.value.name = p.executor;
          search.value.phone = p.phone;
          search.value.idNumber = p.idNumber;
        }
      }
      search.value.name = search.value.name.trim();
      search.value.phone = search.value.phone.trim();
      search.value.idNumber = search.value.idNumber.trim();

      console.log("查询参数:", search.value);

      // 重置分页状态
      currentPage.value = 1;

      await axios.post(
        "/api/express/all",
        { phone: search.value.phone }
      )
        .then(response => {
          const t = response.data.self || [];
          expressData.value = t;
        })
        .catch(error => {
          console.error("Error fetching express information:", error);
        });

      await axios.post("/api/relatedPeople/all", {
        executor: search.value.name,
        phone: search.value.phone,
      })
        .then(async response => {
          const result = response.data;
          tableData.value = result.result || [];
          tableDataCards.value = safeArray(result.cards);
          orderPhone.value = result.orderPhone || '';

          typedText.value = '';
          if (search.value.name === "李沛桐") {
            suggest.value = "被查询人涉及的关联人有李一格（户籍）、邵风顺（平台）、李东（平台）等，被查询人涉及的关联财产有不动产共有人无。被查询人涉及的关联企业有海州区车盟汽车经营部、连云港车盟汽车销售服务有限公司、连云港百业共生商务咨询有限公司、连云港汉威信息科技有限公司。\n" +
              "被查询人关联人较多，可以通过对关联人的情况进行调查，了解被查询人的社会关系，辅助开展送达、执行工作。被查询人涉及的关联财产，应当及时核实财产状况，结合婚姻登记信息以及关联人情况，核实是否存在转移财产或规避执行的情况。被查询人涉及的关联企业多，应当重点关注被查询人在关联企业担任的职务，及时冻结被查询人的工资、持有的股权，并辅助开展送达、执行工作。\n"
          } else if (search.value.name === "孙广才") {
            suggest.value = "被查询人涉及的关联人有陈蓉蓉（妻）、孙子轩（子）、孙艺文（长女）、孙子函（二女）等，被查询人涉及的关联财产有不动产共有人陈蓉蓉。被查询人涉及的关联企业有连云港市海州广才供销批发部、连云港市亿吉皮件厂。\n" +
              "被查询人关联人较多，可以通过对关联人的情况进行调查，了解被查询人的社会关系，辅助开展送达、执行工作。被查询人涉及的关联财产，应当及时核实财产状况，结合婚姻登记信息以及关联人情况，核实是否存在转移财产或规避执行的情况。被查询人涉及的关联企业多，应当重点关注被查询人在关联企业担任的职务，及时冻结被查询人的工资、持有的股权，并辅助开展送达、执行工作。\n"
          } else if (search.value.name === "叶如怀") {
            suggest.value = "被查询人涉及的关联企业有连云港品墅装饰有限公司。应当重点关注被查询人在关联企业担任的职务，及时冻结被查询人的工资、持有的股权，并辅助开展送达、执行工作。"
          } else {
            suggest.value = result.suggestion || '';
          }

          startTyping();
          iconOpacity.value = 1;

          hasDuplicateAddr.value = false;
          const addressMap = new Map();
          tableData.value.forEach(item => {
            const addr = item.recAddress?.trim() || '';
            if (addr) {
              addressMap.set(addr, (addressMap.get(addr) || 0) + 1);
            }
          });
          hasDuplicateAddr.value = Array.from(addressMap.values()).some(count => count > 1);

          if (search.value.name) {
            await axios.post("/api/query/id", { name: search.value.name })
              .then(res => {
                const realEstateInfo = res.data.realEstateInfo || [];
                const coOwnershipCount = realEstateInfo.filter(item => item.coOwnershipStatus === '有').length;
                coOwnershipInfo.value = coOwnershipCount > 0 ? `是，${coOwnershipCount}处共有房产` : '否';
              })
              .catch(() => {
                coOwnershipInfo.value = '未知';
              });
          } else {
            coOwnershipInfo.value = '未知';
          }

          initLineChart();

          setTimeout(() => {
            if (performanceScore.value !== null) {
              typedText.value = typedText.value.replace(/\n\n履行能力打分：\d+\/10/g, '');
              showScore.value = true;
            }
          }, suggest.value.length * typingInterval.value + 500);
        })
        .catch(error => {
          console.error('获取关联人失败:', error);
          setTimeout(() => {
            if (performanceScore.value !== null) {
              typedText.value = typedText.value.replace(/\n\n履行能力打分：\d+\/10/g, '');
              showScore.value = true;
            }
          }, suggest.value.length * typingInterval.value + 500);
        });
      await axios.post("/api/personEnterprise/info", {
        idNumber: search.value.idNumber
      }).then(response => {
        const result = response.data.data || [];
        // personalEnterpriseData.value = result.filter((item) => {
        //   return item.legalRepresentative && item.legalRepresentative.includes(search.value.name);
        // });
        personalEnterpriseData.value = result;
      })
        .catch(error => {
          console.error("Error fetching personal enterprise information:", error);
        });
      await axios.post("/api/meituan/relatedPeopleFrequency", {
        phone: search.value.phone
      })
        .then(response => {
          const result = response.data;
          if (result.code === 200) {
            relatedPeopleFrequency.value = result.data || [];
            initBarChart();
            recalculatePerformanceScore();
          }
        })
        .catch(error => {
          console.error('获取关联人外卖信息交互频次失败:', error);
        });
    };

    const startTyping = () => {
      typingTimer.value = setInterval(() => {
        if (typedText.value.length < suggest.value.length) {
          typedText.value += suggest.value[typedText.value.length];
        } else {
          stopTyping();
        }
      }, typingInterval.value);
    };

    const stopTyping = () => {
      if (typingTimer.value) {
        clearInterval(typingTimer.value);
        typingTimer.value = null;
      }
    };

    const recalculatePerformanceScore = () => {
      if (tableData.value.length === 0) return;

      let score = 10;
      const result = tableData.value || [];
      const cards = tableDataCards.value || [];
      const orderPhoneVal = orderPhone.value;

      score -= Math.min(result.length, 5);
      score -= Math.min(cards.length * 0.5, 3);

      const addressMap = new Map();
      result.forEach(item => {
        const addr = item.recAddress?.trim() || '';
        if (addr) {
          addressMap.set(addr, (addressMap.get(addr) || 0) + 1);
        }
      });
      if (Array.from(addressMap.values()).some(count => count > 1)) {
        score -= 2;
      }

      if (orderPhoneVal && !result.some(r => r.recPhone === orderPhoneVal)) {
        score -= 2;
      }

      if (relatedPeopleFrequency.value && relatedPeopleFrequency.value.length > 0) {
        const frequencies = relatedPeopleFrequency.value.map(item => item.frequency || 0);
        const totalFreq = frequencies.reduce((a, b) => a + b, 0);
        const avgFreq = totalFreq / frequencies.length;

        if (avgFreq > 10) {
          score -= 2;
        } else if (avgFreq > 5) {
          score -= 1;
        }
      }

      performanceScore.value = Math.max(1, Math.min(10, Math.round(score)));
      showScore.value = true;
    };

    const generateTrendDataBasedOnFrequency = (length, totalFrequency) => {
      if (totalFrequency <= 0) {
        return new Array(length).fill(0);
      }

      const average = totalFrequency / length;
      const data = new Array(length).fill(average);

      for (let i = 0; i < length; i++) {
        const wave = Math.sin((i / length) * 2 * Math.PI) * (average * 0.3);
        data[i] = average + wave;
      }

      const minVal = Math.min(...data);
      if (minVal < 0) {
        for (let i = 0; i < length; i++) {
          data[i] = data[i] - minVal;
        }
      }

      const currentSum = data.reduce((a, b) => a + b, 0);
      const ratio = totalFrequency / currentSum;

      for (let i = 0; i < length; i++) {
        data[i] = data[i] * ratio;
      }

      let roundedData = data.map(val => Math.round(val));
      let roundedSum = roundedData.reduce((a, b) => a + b, 0);
      let diff = totalFrequency - roundedSum;

      if (diff !== 0) {
        const step = diff > 0 ? 1 : -1;
        for (let i = 0; i < Math.abs(diff); i++) {
          roundedData[i % length] += step;
        }
      }

      return roundedData;
    };

    const initBarChart = () => {
      if (!chartRefBar.value) return;
      const barInstance = echarts.init(chartRefBar.value);

      let chartData = [];
      if (!relatedPeopleFrequency.value || relatedPeopleFrequency.value.length === 0) {
        chartData = [{ recName: '暂无数据', frequency: 0 }];
      } else {
        // 只取前4条数据，与左侧的4个名字对应
        chartData = [...relatedPeopleFrequency.value]
          .sort((a, b) => b.frequency - a.frequency)
          .slice(0, 4);
      }

      const reversedData = [...chartData].reverse();
      const option = {
        title: { text: '外卖信息交互频次', left: 'center' },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          formatter: function (params) {
            const item = params[0];
            return `${item.name}<br/>${item.marker} ${item.seriesName}: ${item.value} 次`;
          }
        },
        grid: { left: 100, right: 20, top: 40, bottom: 20 },
        xAxis: {
          type: 'value',
          axisLabel: { formatter: '{value} 次' }
        },
        yAxis: {
          type: 'category',
          data: reversedData.map(item => item.recName),
          axisLabel: { fontSize: 12, margin: 15 }
        },
        series: [{
          name: '交互频次',
          type: 'bar',
          data: reversedData.map(item => item.frequency),
          itemStyle: { color: '#409eff' },
          barWidth: 18
        }]
      };
      barInstance.setOption(option);

      window.addEventListener('resize', () => {
        barInstance.resize();
      });
    };

    const initLineChart = () => {
      if (!chartRefLine.value) return;
      const lineInstance = echarts.init(chartRefLine.value);

      const dates = ['2024-01-01', '2024-01-05', '2024-01-10', '2024-01-15', '2024-01-20', '2024-01-25', '2024-01-30'];
      let values;
      let totalFrequency = 0;

      if (relatedPeopleFrequency.value && relatedPeopleFrequency.value.length > 0) {
        const frequencies = relatedPeopleFrequency.value.map(item => item.frequency || 0);
        totalFrequency = frequencies.reduce((a, b) => a + b, 0);
      } else if (tableData.value && tableData.value.length > 0) {
        totalFrequency = tableData.value.length * 5;
      } else {
        totalFrequency = 30;
      }

      values = generateTrendDataBasedOnFrequency(dates.length, totalFrequency);
      const option = {
        title: { text: '财产交互波动趋势', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: dates },
        yAxis: { type: 'value', name: '次数' },
        series: [{
          name: '交互次数',
          type: 'line',
          data: values,
          smooth: true,
          lineStyle: { color: '#409eff' },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#409eff' },
              { offset: 1, color: '#b3d8ff' }
            ])
          }
        }]
      };
      lineInstance.setOption(option);

      window.addEventListener('resize', () => {
        lineInstance.resize();
      });
    };

    onMounted(() => {
      if (route.query.name || route.query.phone || route.query.idNumber) {
        load();
      }
    });

    return {
      expressData,
      personalEnterpriseData,
      search,
      tableData,
      currentPageData,
      currentPage,
      pageSize,
      total,
      handleSizeChange,
      handleCurrentChange,
      tableDataCards,
      typedText,
      chartRefBar,
      chartRefLine,
      load,
      startTyping,
      stopTyping,
      aiIconSrc,
      iconOpacity,
      performanceScore,
      orderPhone,
      hasDuplicateAddr,
      getRelation,
      isAddressDuplicate,
      coOwnershipInfo,
      showScore,
      goToHome,
      goToPage
    };
  }
};
</script>

<style scoped>
.home {
  font-family: 'Microsoft YaHei', sans-serif;
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  background-color: #f5f7fa;
}

.panels-container {
  display: flex;
  gap: 16px;
  width: 100%;
}

/* 通用样式 */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.section-title {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.card-header {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 布局样式 */
.left-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 减小左侧组件间距 */
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 减小右侧组件间距 */
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.search-btn {
  white-space: nowrap;
}

/* AI指引区域 */
.ai-guide-card {
  padding: 16px;
}

.ai-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ai-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  transition: opacity 0.5s ease-in-out;
}

.ai-text-container {
  flex: 1;
  position: relative;
}

.ai-textarea {
  flex: 1;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}

.score-overlay {
  position: absolute;
  bottom: 20px;
  left: 28px;
  font-weight: bold;
  color: #f56c6c;
  pointer-events: none;
  font-size: 14px;
}

/* 信息卡片样式 */
.info-card {
  margin-top: 8px;
  margin-bottom: 8px;
  /* 减小信息卡片底部间距 */
}

.info-content {
  padding: 16px;
  /* 略微减小内边距 */
  text-align: center;
}

.info-text {
  margin-top: 8px;
  color: #666;
  line-height: 1.6;
}

.label-primary {
  color: #409eff;
}

.label-warning {
  color: #e6a23c;
}

.label-gray {
  color: #909399;
}

.label-orange {
  color: #ff9900;
}

.label-success {
  color: #5cb85c;
}

.value-danger {
  color: #f56c6c;
}

.value-success {
  color: #5cb85c;
}

.value-primary {
  color: #409eff;
}

/* 表格样式 */
.info-table {
  width: 100%;
  margin-bottom: 16px;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #909399;
}

/* 银行卡区域 */
.bank-cards-container {
  padding: 14px;
  margin-bottom: 0;
  /* 移除银行卡区域底部额外间距 */
}

.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-item {
  background-color: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: monospace;
  color: #409eff;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 图表区域 */
.chart-card {
  display: flex;
  flex-direction: column;
}

.chart-container {
  width: 100%;
  flex-grow: 1;
}

/* 调整图表高度 */
.bar-chart {
  min-height: 180px;
}

/* 缩小波动图高度以与左侧对齐 */
.adjusted-line-chart {
  flex: 0.8;
  /* 调整flex比例，使图表高度减小 */
}

.line-chart {
  min-height: 220px;
  /* 减小波动图最小高度 */
}

/* 底部对齐组件特殊样式 */
.bottom-aligned {
  margin-bottom: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .panels-container {
    flex-direction: column;
  }

  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-btn {
    width: 100%;
  }

  .adjusted-line-chart {
    flex: 1;
  }

  .line-chart {
    min-height: 200px;
  }
}
</style>
